<template>
	<view class="h-100vh fd-c">
		<scroll-view scroll-x="true" class="nowrap bgc-white px-12">
			<view class="fd-r">
				<block v-for="(item, idx) in goodTypeTree" :key="item.id">
					<view class="py-12 px-8 fd-c ai-c" @click="HTopChange(idx)">
						<image
							class="w-100 h-100"
							:src="item.img"
							mode="aspectFill"
						></image>
						<text
							class="mt-12 fs-28 lines1 text-align-center"
							:class="[topIdx == idx ? 'c-red' : 'c-grey']"
						>
							{{ item.name }}
						</text>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="divider"></view>

		<view class="flex1 fd-r ai-s">
			<view class="w-200 bgc-F9F9FA relative">
				<scroll-view scroll-y="true" class="absolute">
					<div class="fd-c ai-s">
						<block v-for="(item, idx) in leftList" :key="item">
							<view
								class="px-12 py-24 fd-r jc-c"
								:class="{ 'bgc-white': idx == leftIdx }"
								@click="HLeftChange(idx)"
							>
								<image
									class="w-24 h-24"
									:src="item.img"
									mode="aspectFill"
								></image>
								<text class="ml-12 fs-24">
									{{ item.name }}
								</text>
							</view>
						</block>
					</div>
				</scroll-view>
			</view>

			<view class="flex1 relative bgc-white">
				<scroll-view scroll-y="true" class="absolute" @scrolltolower="HGetGoodList(false)">
					<block v-for="item in goodList" :key="item.id">
						<view class="z-card p-24 fd-r" @click="HGotoDetail(item)">
							<image
								class="w-100 h-100"
								:src="item.mainImg"
								mode=""
							></image>

							<view class="flex1 pl-16">
								<view class="">
									<text class="fs-28 fw-b">
										{{ item.goodsTitle }}
									</text>
								</view>
								<view class="fd-r pt-12">
									<text class="fs-24 c-red">￥</text>
									<text class="fs-32 c-red">
										{{ item.goodsPrice }}
									</text>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

import { storeToRefs } from 'pinia';
import { useGoodTypeStore } from '@/store/googType.js';
const goodTypeStore = useGoodTypeStore();
const { goodTypeTree, topIdx, leftList, leftIdx } = storeToRefs(goodTypeStore);

import goodSkuApi from '@/api/goodSkuApi.js';
const pageSize = 10;
const goodList = ref([]); // 右侧商品列表数据
const HGetGoodList = (refresh) => {
	if(refresh) {
		goodList.value =[]
	}
	const len = goodList.value.length;
	const current = refresh ? 1 : Math.ceil(len / pageSize) + 1;
	console.log('leftList', leftList.value);
	const params = {
		current,
		size: pageSize,
		goodTypeId: leftList.value[leftIdx.value].id
	};
	console.log('params', params);
	goodSkuApi.pageByGood(params).then((res) => {
		const arr = res.data.records.map((v) => {
			return v;
		});

		goodList.value.push(...arr)
	});
};

const HTopChange = (idx) => {
	topIdx.value = idx;
	leftIdx.value = 0;
	HGetGoodList(true);
};

const HLeftChange = (idx) => {
	leftIdx.value = idx;
	HGetGoodList(true);
};

onLoad(() => {
	HGetGoodList();
});

import toolLogin from '@/utils/login.js';
const HGotoDetail = (item) => {
	toolLogin.isNeedToLogin((res) => {
		if (res) {
			uni.navigateTo({ url: `/pages/zone1/goods/index?id=${item.id}` });
		}
	});
};
</script>

<style lang="scss" scoped>
.absolute {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
